<template>
    <div class="notice">
        <transition name="close-all">
            <div class="close-all"
                v-if="showCloseAll && messages.length > 0"
                v-on:touchend="closeAllButtonClick()">
                <input type="image" draggable="false"
                    src="assert/closew.svg"
                    v-on:click="closeAllButtonClick()" />
            </div>
        </transition>
        <transition-group class="notices" tag="div" name="notice">
            <div class="notice-item"
                v-for="(item, index) in messages"
                v-bind:key="item"
                v-on:touchend="closeButtonClick(index)">
                <div class="close-button">
                    <input type="image" draggable="false"
                        src="assert/closew.svg"
                        v-on:click="closeButtonClick(index)" />
                </div>
                <div>{{item.msg}}</div>
            </div>
        </transition-group>
    </div>
</template>

<script>
export default {
    name: 'notice',
    props: {
        showCloseAll: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        messages: function () {
            return this.$store.state.messages;
        }
    },
    methods: {
        closeButtonClick: function (index) {
            this.$store.dispatch('removeMessage', index);
        },
        closeAllButtonClick: function () {
            this.$store.dispatch('removeAllMessage');
        }
    }
}
</script>

<style lang="less">
.notice {
    position: fixed;
    max-width: 400px;
    top: 0px;
    right: 0px;

    .close-all, .notice-item {
        display: block;
        width: 250px;
        padding: 12px 12px;
        margin: 8px;
        color: rgb(255, 255, 255);
        font-size: 20px;
        font-weight: 300;
        background-color: rgba(180, 180, 180, 1);
        box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.2);
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

    .close-all {
        text-align: right;
        input {
            opacity: 0.4;
            transition: opacity 0.2 ease;
        }
        &:hover input {
            opacity: 0.6;
            &:hover {
                opacity: 1;
            }
        }
    }

    .notice-item .close-button {
        display: block;
        text-align: right;
        input {
            opacity: 0;
            transition: opacity 0.2s ease;
        }
    }

    .notice-item:hover .close-button input {
        opacity: 0.4;
        &:hover {
            opacity: 1;
        }
    }
}

.notice-item {
    transition: all .3s ease;
}
.notice-leave-active {
    position: absolute;
}
.notice-enter, .notice-leave-to {
    opacity: 0;
    transform: translateX(250px);
}

.close-all-enter-active, .close-all-leave-active {
    transition: all .3s ease;
}
.close-all-enter, .close-all-leave-to {
    opacity: 0;
    transform: translateY(-50px);
}
</style>
